<template>
  <div class="container-fluid" id="search-flight">
    <div class="container-fluid">
      <div class="container" style="padding: 50px 0px;">
        <el-card class="box-card">
          <el-tabs v-model="tagActiveName" :stretch="true">
            <el-tab-pane label="按地名查询" name="airport">
              <el-row type="flex" justify="center">
                <el-col :span="8">
                  <el-radio-group
                      v-model="byAirport.searchType">
                    <el-radio border size="small" label="1">单程</el-radio>
                    <el-radio border size="small" label="2">往返</el-radio>
                    <el-radio border size="small" label="3">多段</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>

              <el-form
                  :inline="true"
                  :model="byAirport.flightList.req.first"
                  ref="ruleForm"
                  class="demo-ruleForm"
                  size="medium"
                  label-width="120px">
                <!-- 多段航班 开始 -->
                <!-- 多段航班第一段 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType == '3' && flightCount > 1">
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.first.from" :label.sync="byAirport.flightList.req.first.fromLabel" :placeholder="'出发地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.first.to" :label.sync="byAirport.flightList.req.first.toLabel" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.first.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 多段航班第二段 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType == '3' && flightCount > 1">
                  <el-col :span="8">
                    <el-input v-model="byAirport.flightList.req.first.toLabel" placeholder="出发地"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.second.to" :label.sync="byAirport.flightList.req.second.toLabel" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.second.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 多段航班第三段 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType == '3' && flightCount > 2">
                  <el-col :span="8">
                    <el-input v-model="byAirport.flightList.req.second.toLabel" placeholder="出发地"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.third.to" :label.sync="byAirport.flightList.req.third.toLabel" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.third.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 多段航班第四段 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType == '3' && flightCount > 3">
                  <el-col :span="8">
                    <el-input v-model="byAirport.flightList.req.third.toLabel" placeholder="出发地"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.fourth.to" :label.sync="byAirport.flightList.req.fourth.toLabel" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.fourth.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 多段航班第五段 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType == '3' && flightCount > 4">
                  <el-col :span="8">
                    <el-input v-model="byAirport.flightList.req.fourth.toLabel" placeholder="出发地"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.fifth.to" :label.sync="byAirport.flightList.req.fifth.toLabel" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.fifth.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 多段航班第六段 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType == '3' && flightCount > 5">
                  <el-col :span="8">
                    <el-input v-model="byAirport.flightList.req.fifth.toLabel" placeholder="出发地"></el-input>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.sixth.to" :label.sync="byAirport.flightList.req.sixth.toLabel" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.sixth.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <!-- 多段航班 结束 -->

                <!-- 单程航班或往返航班 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byAirport.searchType != '3'">
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.first.from" :placeholder="'出发地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <positionBox :from.sync="byAirport.flightList.req.first.to" :placeholder="'目的地'"></positionBox>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        v-if="byAirport.searchType == '2'"
                        key="2"
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.first.when"
                        type="daterange"
                        range-separator=""
                        start-placeholder="前往日期"
                        end-placeholder="返程日期"
                        class="date-daterange"
                        :clearable="false"
                        :pickerOptions="pickerOptions"
                        style="width: 100%;"
                    >
                    </el-date-picker>
                    <el-date-picker
                        key="1"
                        v-else
                        value-format="yyyy-MM-dd"
                        v-model="byAirport.flightList.req.first.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>

                <!-- 查询按钮 -->
                <el-row :gutter="40" type="flex" justify="space-between">
                  <el-col :span="8">
                    <el-button type="text" v-if="byAirport.searchType == '3'" icon="el-icon-circle-plus-outline" @click="addNewFlight">添加新的航班（最多支持6段航班）</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="byAirport.flightList.req.first.passengerCount" style="width: 100%;">
                      <el-option
                          v-for="item in passengerCountList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-button icon="el-icon-search" type="primary" @click="search" style="width: 100%;">查 询</el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>

            <!-- 按航班号查询 -->
            <el-tab-pane label="按航班号查询" name="flightNumber">
              <el-row type="flex" justify="center">
                <el-col :span="24">
                  <el-alert
                      title="目前仅支持单程航班查询，更多查询方式将在后续版本中陆续开放。"
                      type="info">
                  </el-alert>
                </el-col>
              </el-row>

              <el-form
                  :inline="true"
                  :model="byFlightNumber.flightList.req"
                  ref="ruleForm"
                  class="demo-ruleForm"
                  size="medium"
                  label-width="120px">
                <!-- 单程航班或往返航班 -->
                <el-row :gutter="40" type="flex" justify="space-between" v-if="byFlightNumber.searchType != '3'">
                  <el-col :span="8">
                    <FlightNumberSelect :level="'first'" @select-flight-number="handleFlightNumberSelected"/>
                  </el-col>
                  <el-col :span="8">
                    <el-select v-model="byFlightNumber.flightList.req.first.passengerCount" style="width: 100%;">
                      <el-option
                          v-for="item in passengerCountList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="8">
                    <el-date-picker
                        key="1"
                        value-format="yyyy-MM-dd"
                        v-model="byFlightNumber.flightList.req.first.when"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width: 100%;">
                    </el-date-picker>
                  </el-col>
                </el-row>

                <!-- 查询按钮 -->
                <el-row :gutter="40" type="flex" justify="space-between">
                  <el-col :span="8">
                    <el-button type="text" @click="dialogVisible = true" icon="el-icon-warning-outline">关于近期出行的重要提示</el-button>
                  </el-col>
                  <el-col :span="8">
                    <div style="display: flex; justify-content: space-between; align-content: center;" v-if="byFlightNumber.flightList.req.first.fromLabel">
                      <div style="width: 100%; text-align: center;">
                        <p>{{byFlightNumber.flightList.req.first.fromLabel}}</p>
                      </div>
                      <div style="width: 100%;">
                        <p class="zls-flg-dir"><i></i></p>
                      </div>
                      <div style="width: 100%; text-align: center;">
                        <p>{{byFlightNumber.flightList.req.first.toLabel}}</p>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <el-button icon="el-icon-search" type="primary" @click="search" style="width: 100%;">查 询</el-button>
                  </el-col>
                </el-row>

                <el-dialog
                    title="关于近期出行的重要提示"
                    :visible.sync="dialogVisible"
                    width="30%">
                  <el-row style="padding: 20px;">
                    <el-col :span="24">
                      <p style="text-indent: 2em;">
                        尊敬的旅客：各地根据疫情防控需要，动态调整疫情防控措施，其中包括但不限于凭48小时或24小时内核酸检测阴性证明乘机、抵达后接受核酸检测、查验健康码、集中隔离等管控措施。以上措施可能根据疫情形势变化适时调整，请您务必在出行前了解始发站、目的站和经停站的最新疫情管控政策，特别是对核酸检测次数、检测时限的具体要求，并以有关部门发布的最新防控要求为准，合理安排出行，感谢您的理解和支持！
                      </p>
                      <p style="text-align: right;">
                        更新日期：2021年12月7日
                      </p>
                    </el-col>
                  </el-row>
                </el-dialog>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>

    {{newFlightList.length}}

    <!-- 热门航班列表 -->
    <div class="container-fluid" style="border-top: 4px ridge #04599C; padding: 20px 0px;" v-if="newFlightList.length > 0">
      <div class="container flight-list-box">
        <el-tabs v-model="newTab">
          <el-tab-pane label="热门航班" name="flightNew">
            <el-row>
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in newFlightList" :key="item.dataId" :level="'first'" @select-flight="handleGoReservation"></flightList>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 按机场地查询结果 -->
    <div class="container-fluid" style="border-top: 4px ridge #04599C; padding: 20px 0px;"
         v-if="tagActiveName == 'airport' && newFlightList.length == 0">

      <!-- 单程航班 -->
      <div class="container flight-list-box" v-if="byAirport.searchType == '1'">
        <el-tabs v-model="singleTab">
          <el-tab-pane label="航班列表" name="flights">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.first.rows" :key="item.dataId" :level="'first'" @select-flight="handleGoReservation"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 往返航班 -->
      <div class="container flight-list-box" v-if="byAirport.searchType == '2' && newFlightList.length == 0">
        <el-tabs v-model="flightGoOrBack" @tab-click="gotoAndBackTabClick" :before-leave="handleCheckSelectTo">
          <el-tab-pane label="去程航班" name="first">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.first.rows" :key="item.dataId" :level="'first'" @select-flight="handleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="返程航班" name="second">
            <el-row v-if="byAirport.flightList.resp.second.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.second.rows" :key="item.dataId" :level="'second'" @select-flight="handleGoReservation"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>

      <!-- 多段航班 -->
      <div class="container flight-list-box" v-if="byAirport.searchType == '3'">
        <el-tabs v-model="flightGoOrBack" @tab-click="gotoAndBackTabClick" :stretch="true">
          <el-tab-pane label="第一段" name="first">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.first.rows" :key="item.dataId" :level="'first'" @select-flight="handleMultipleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="第二段" name="second">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.second.rows" :key="item.dataId" :level="'second'" @select-flight="handleMultipleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="第三段" name="third">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.third.rows" :key="item.dataId" :level="'third'" @select-flight="handleMultipleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="第四段" name="fourth">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.fourth.rows" :key="item.dataId" :level="'fourth'" @select-flight="handleMultipleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="第五段" name="fifth">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.fifth.rows" :key="item.dataId" :level="'fifth'" @select-flight="handleMultipleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="第六段" name="sixth">
            <el-row v-if="byAirport.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byAirport.flightList.resp.sixth.rows" :key="item.dataId" :level="'sixth'" @select-flight="handleMultipleFlightSelected"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 按航班号查询结果 -->
    <div class="container-fluid" style="border-top: 4px ridge #04599C; padding: 20px 0px;"
         v-else-if="tagActiveName == 'flightNumber'">
      <!-- 单程航班 -->
      <div class="container flight-list-box" v-if="byFlightNumber.searchType == '1'">
        <el-tabs v-model="singleTab">
          <el-tab-pane label="航班列表" name="flights">
            <el-row v-if="byFlightNumber.flightList.resp.first.rows.length > 0">
              <el-col :span="24">
                <flightList style="margin-top: 20px;" :flightData="item"
                            v-for="(item, index) in byFlightNumber.flightList.resp.first.rows" :key="item.dataId" :level="'first'" @select-flight="handleGoReservation"></flightList>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="24">
                <el-empty description="未找到相关航班信息"></el-empty>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

  </div>
</template>

<script>
import positionBox from "./components/position.vue";
import flightList from "./components/flightList.vue";
import {flightLit, flightNumbers, newFlightLit } from "@/api/flight/schedule";
import {flightLineDetails} from '@/api/flight/line'
import Cookies from 'js-cookie'
import FlightNumberSelect from "@/views/components/FlightNumberSelect";

let today = new Date(
    Date.UTC(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
    )
)
    .toISOString()
    .slice(0, 10);
export default {
  components: {FlightNumberSelect, positionBox, flightList},
  data() {
    return {
      newTab: 'flightNew',
      // 热门航班列表
      newFlightList: [],
      // 第一次进入首页
      firstIn: true,
      dialogVisible: false,
      // 航班段数
      flightCount: 2,
      // 按机场地查询相关参数
      byAirport: {
        // 查询类型 1 单程 2 往返 3 中转
        searchType: '1',
        // 显示标题 1 航班列表 2-1 去程航班 2-2 返程航班 3 航班列表
        displayTitle: '1',
        // 查询参数
        flightList: {
          // 请求参数
          req: {
            // 第一段行程
            first: {
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第二段行程【非往返可不写】
            second: {
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第三段行程【既非往返又非多段可不写】
            third: {
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第四段行程【既非往返又非多段可不写】
            fourth: {
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第五段行程【既非往返又非多段可不写】
            fifth: {
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第六段行程【既非往返又非多段可不写】
            sixth: {
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            }
          },
          // 响应值
          resp: {
            first: {
              // 航班列表
              rows: []
            },
            second: {
              // 航班列表
              rows: []
            },
            third: {
              // 航班列表
              rows: []
            },
            fourth: {
              // 航班列表
              rows: []
            },
            fifth: {
              // 航班列表
              rows: []
            },
            sixth: {
              // 航班列表
              rows: []
            }
          }
        }
      },
      // 按航班号查询相关参数
      byFlightNumber: {
        // 查询类型 1 单程 2 往返 3 中转
        searchType: '1',
        // 显示标题 1 航班列表 2-1 去程航班 2-2 返程航班 3 航班列表
        displayTitle: '1',
        // 查询参数
        flightList: {
          // 请求参数
          req: {
            // 第一段行程
            first: {
              flightNumber: '',
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第二段行程【非往返可不写】
            second: {
              flightNumber: '',
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第三段行程【既非往返又非多段可不写】
            third: {
              flightNumber: '',
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第四段行程【既非往返又非多段可不写】
            fourth: {
              flightNumber: '',
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第五段行程【既非往返又非多段可不写】
            fifth: {
              flightNumber: '',
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            },
            // 第六段行程【既非往返又非多段可不写】
            sixth: {
              flightNumber: '',
              from: "",
              fromLabel: "",
              to: "",
              toLabel: "",
              when: today,
              passengerCount: 1
            }
          },
          // 响应值
          resp: {
            first: {
              // 航班列表
              rows: []
            },
            second: {
              // 航班列表
              rows: []
            },
            third: {
              // 航班列表
              rows: []
            },
            fourth: {
              // 航班列表
              rows: []
            },
            fifth: {
              // 航班列表
              rows: []
            },
            sixth: {
              // 航班列表
              rows: []
            }
          }
        }
      },
      // 当前tag页 airport 按机场地查 flightNumber 按航班号查询
      tagActiveName: 'airport',
      // 日期可选
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() - 8.64e7;
        },
      },
      // 乘客数量可选项
      passengerCountList: [],
      // 往返标签页
      flightGoOrBack: 'first',
      // 单程航班标签页
      singleTab: 'flights',
      // 预订数据
      reservationData: {
        reservationType: '1', // 1/3 单程航班 2 往返航班
        // 航班数据ID
        flights: [],
        // 航班数据ID对象
        flightObj: {
          first: '',
          second: '',
          third: '',
          fourth: '',
          fifth: '',
          sixth: '',
        },
        // 乘客
        passengers: [
          {
            // 乘客数据ID
            dataId: '',
            // 舱位
            flightClass: ''
          }
        ]
      }
    };
  },
  computed: {},
  created() {
    this.initPassengerCount()
    this.loadNewFlightList()
  },
  updated() {
  },
  methods: {
    // 加载新航班列表
    loadNewFlightList() {
      newFlightLit().then(res => {
        this.newFlightList = res.data
      })
    },
    // 航班号选择处理事件
    handleFlightNumberSelected(level, startStation, startStationDisplay, endStation, endStationDisplay) {
      this.byFlightNumber.flightList.req[level].from = startStation
      this.byFlightNumber.flightList.req[level].fromLabel = startStationDisplay
      this.byFlightNumber.flightList.req[level].to = endStation
      this.byFlightNumber.flightList.req[level].toLabel = endStationDisplay
    },
    // 添加新的航班
    addNewFlight() {
      if (this.flightCount < 6) {
        this.flightCount++
      } else {
        this.$message.warning("最多支持订购6段航班。");
      }
    },
    // 检查是否选择了去程航班
    handleCheckSelectTo(newIndex, oldIndex) {
      if (newIndex == 'second') {
        if (this.reservationData.flightObj['first']) {
          return true
        } else {
          this.$message.warning("请先选择去程航班。");
          return false
        }
      }
    },
    // 多段航班选择事件
    handleMultipleFlightSelected(level, dataId) {
      this.reservationData.flightObj[level] = dataId

      let count = 0
      for (let key in this.reservationData.flightObj) {
        if (this.reservationData.flightObj[key]) {
          count++;
        }
      }

      if (count == this.flightCount) {
        if (this.tagActiveName == 'airport') {
          this.reservationData.reservationType = this.byAirport.searchType

          for (let key in this.reservationData.flightObj) {
            if (this.reservationData.flightObj[key]) {
              this.reservationData.flights.push(this.reservationData.flightObj[key])
            }
          }

          Cookies.set('reservationData', JSON.stringify(this.reservationData))
          this.$router.push({name:"reservation"})
        } else  if (this.tagActiveName == 'flightNumber') {

        }
      }
    },
    // 前往预订页面处理事件
    handleGoReservation(level, dataId) {
      this.reservationData.flightObj[level] = dataId
      this.reservationData.flights.push(dataId)
      if (this.tagActiveName == 'airport') {
        this.reservationData.reservationType = this.byAirport.searchType
      } else if (this.tagActiveName == 'flightNumber') {
        this.reservationData.reservationType = this.byFlightNumber.searchType
      }
      Cookies.set('reservationData', JSON.stringify(this.reservationData))
      this.$router.push({name:"reservation"})
    },
    // 选择去程航班处理事件
    handleFlightSelected(level, dataId) {
      this.reservationData.flights = []
      this.reservationData.flights.push(dataId)
      this.reservationData.flightObj[level] = dataId
    },
    // 往返航班标签页点击事件
    gotoAndBackTabClick() {
    },
    // 航班号选中后事件
    changeFlightNumber(value) {
      flightLineDetails(value).then(res => {
        let data = res.data
        this.byFlightNumber.queryParams.startStation = data.startStation
        this.byFlightNumber.queryParams.startStationDisplay = data.startStationDisplay
        this.byFlightNumber.queryParams.endStation = data.endStation
        this.byFlightNumber.queryParams.endStationDisplay = data.endStationDisplay
      })
    },
    // 初始化乘客数
    initPassengerCount() {
      for (let i = 1; i < 10; i++) {
        this.passengerCountList.push({
          value: i,
          label: i + '位乘客'
        })
      }
    },
    /* 点击查询 */
    search() {
      this.getList();
    },
    // 按机场地方式查询航班列表
    getListByAirport() {
      // 单程
      if (this.byAirport.searchType == '1') {
        flightLit(this.byAirport.flightList.req.first).then(res => {
          this.byAirport.flightList.resp.first.rows = res.data
        })
      } else if (this.byAirport.searchType == '2') { // 往返
        this.byAirport.flightList.req.second.from = this.byAirport.flightList.req.first.to
        this.byAirport.flightList.req.second.to = this.byAirport.flightList.req.first.from
        this.byAirport.flightList.req.second.when = this.byAirport.flightList.req.first.when[1]
        this.byAirport.flightList.req.second.passengerCount = this.byAirport.flightList.req.first.passengerCount

        this.byAirport.flightList.req.first.when = this.byAirport.flightList.req.first.when[0]

        // 第一段航班
        flightLit(this.byAirport.flightList.req.first).then(res => {
          this.byAirport.flightList.resp.first.rows = res.data
        })
        // 第二段航班
        flightLit(this.byAirport.flightList.req.second).then(res => {
          this.byAirport.flightList.resp.second.rows = res.data
        })
      } else if (this.byAirport.searchType == '3') { // 多段
        // 二段
        this.byAirport.flightList.req.second.from = this.byAirport.flightList.req.first.to
        flightLit(this.byAirport.flightList.req.first).then(res => {
          this.byAirport.flightList.resp.first.rows = res.data
        })
        flightLit(this.byAirport.flightList.req.second).then(res => {
          this.byAirport.flightList.resp.second.rows = res.data
        })

        // 三段
        if (this.flightCount > 2) {
          this.byAirport.flightList.req.third.from = this.byAirport.flightList.req.second.to
          flightLit(this.byAirport.flightList.req.third).then(res => {
            this.byAirport.flightList.resp.third.rows = res.data
          })
        }

        // 四段
        if (this.flightCount > 3) {
          this.byAirport.flightList.req.fourth.from = this.byAirport.flightList.req.third.to
          flightLit(this.byAirport.flightList.req.fourth).then(res => {
            this.byAirport.flightList.resp.fourth.rows = res.data
          })
        }

        // 五段
        if (this.flightCount > 4) {
          this.byAirport.flightList.req.fifth.from = this.byAirport.flightList.req.fourth.to
          flightLit(this.byAirport.flightList.req.fifth).then(res => {
            this.byAirport.flightList.resp.fifth.rows = res.data
          })
        }

        // 六段
        if (this.flightCount > 5) {
          this.byAirport.flightList.req.sixth.from = this.byAirport.flightList.req.fifth.to
          flightLit(this.byAirport.flightList.req.sixth).then(res => {
            this.byAirport.flightList.resp.sixth.rows = res.data
          })
        }
      }
    },
    // 按航班号方式查询航班列表
    getListByFlightNumber() {
      // 单程
      if (this.byAirport.searchType == '1') {
        flightLit(this.byFlightNumber.flightList.req.first).then(res => {
          this.byFlightNumber.flightList.resp.first.rows = res.data
        })
      }
    },
    /* 获取航班列表 */
    getList() {
      this.newFlightList = []
      if (this.tagActiveName == 'airport') {
        this.getListByAirport()
      } else if (this.tagActiveName == 'flightNumber') {
        this.getListByFlightNumber()
      }
    }
  },
};
</script>

<style lang="scss">

#search-flight {
  .el-row {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .flight-list-box {
    .el-tabs__item {
      padding-bottom: 10px;
      font-size: 28px;
      color: #FFFFFF;
    }
  }
}

// 始发站终点站箭头 开始
.zls-flg-dir {
  border-bottom: 2px solid #bcc9d7;
  height: 4px;
  position: relative;
  margin-top: 10px;
}

.zls-flg-dir i {
  position: absolute;
  right: -3px;
  top: -2px;
  width: 0;
  height: 0;
  border-left: 12px solid #bcc9d7;
  border-top: 6px solid transparent;
}

// 始发站终点站箭头 结束

</style>
